<template>
	<view class="case_box">

		<view class="card">
			<view class="title_box2 wp dpflxrjb">
				<view class="title dpflxr">
					<view class="icon">
						<image src="../../static/images/icon_zyye.png"></image>
					</view>
					<text>总营业额</text>
					<text class="amount">{{ amount }}</text>
				</view>
				<view class="filter dpflxr" v-on:tap="click">
					<text>筛选</text>
					<view class="icon">
						<image src="../../static/images/icon_sx.png"></image>
					</view>
				</view>
			</view>
			<!-- 2.table -->
			<view class="table">
				<view class="tTitle dpflxr">
					<text class="header ">金额</text>
					<text class="header">用户姓名</text>
					<text class="header">手机号码</text>
					<text class="header">交易时间</text>
				</view>
				<navigator :url="'../index_transaction_detail/index_transaction_detail?id=' + item.id"
					class="tContent dpflxr" v-for="(item, index) in list">
					<text class="content">{{item.realAmount}}</text>
					<text class="content">{{item.customer.userName}}</text>
					<text class="content">{{item.customer.mobile}}</text>
					<view class="content dpflxc">
						<text>{{item.createdAt}}</text>
					</view>
				</navigator>

			</view>

		</view>

		<!-- shadowLayer -->
		<view class="shadowLayer" v-on:tap="hideModel" v-show="showModalStatus"></view>
		<!-- popupWindow  -->
		<transition name="animationData">
			<view :animation="{animationData}" class="popupWindow" v-show="showModalStatus">
				<view class="dpflxrjb title_box wp">
					<text class="title">筛选</text>
					<text class="close" v-on:tap="hideModel">关闭</text>
				</view>
				<view class="title_box2 wp">
					<text class="title">时间段</text>
				</view>
				<view class="dpflxrjb wp">
					<picker class="short picker pos_rel" value="startDate" mode="date" @change="changeStartDate">
						<view>{{ startDate ? startDate : '选择起始日期' }}</view>
						<view class="downArrow pos_abs"></view>
					</picker>
					<text>-</text>
					<picker class="short picker pos_rel" value="endDate" mode="date" @change="changeEndDate">
						<view>{{ endDate ? endDate : '选择结束日期' }}</view>
						<view class="downArrow pos_abs"></view>
					</picker>
				</view>
				<view class="title_box2 wp">
					<text class="title">手机号</text>
				</view>

				<input type="text" @blur="changeMobile" :value="mobile" class="inputBox1 w"
					placeholder="输入用户手机号查询"></input>
				<view class="btn_box5" @click="screen">确认</view>
			</view>
		</transition>
	</view>
</template>


<script>
	import request from "@/api/index.js";

	export default {
		data() {
			return {
				list: [],
				amount: 0,
				startDate: '',
				endDate: '',
				mobile: '',
				showModalStatus: false,
				animationData: null
			}
		},

		onLoad(options) {
			var id = options.id;

			if (id) {
				this.id = id;

				this.getPrice(amount => {
					this.amount = amount;
				})

				this.getList('', '', '', '', 1, list => {
					this.list = list;
				})
			} else {
				uni.showToast({
					title: 'ID缺失',
					icon: 'none',
					mask: true
				})
				setTimeout(function() {
					uni.navigateBack()
				}, 500)
			}

		},

		onReachBottom() {
			var list = this.list;
			var page = this.page;
			var startDate = this.startDate;
			var endDate = this.endDate;
			var mobile = this.mobile;
			var incPage = ++page;

			this.getList(mobile, mobile, startDate, endDate, list_data => {
				if (list_data.length > 0) {
					list_data.forEach(function(val) {
						list.push(val)
					})

					this.list = list;
					this.page = incPage;
				} else {
					uni.showToast({
						title: '暂无更多数据',
						icon: 'none'
					})
				}
			});
		},

		methods: {
			//点击显示底部弹出框函数
			click() {
				this.showModel();
			},
			//显示对话框函数
			showModel() {
				var animation = uni.createAnimation({
					duration: 100,
					timingFunction: "easein",
					delay: 0
				})
				this.animation = animation
				animation.translateY(2000).step()
				this.animationData = animation.export(),
					setTimeout(function() {
						animation.translateY(0).step()
						this.animationData = animation.export();
						this.showModalStatus = true;
					}.bind(this), 200)
			},
			//隐藏对话框函数
			hideModel() {
				var animation = uni.createAnimation({
					duration: 200,
					timingFunction: "linear",
					delay: 0
				})
				this.animation = animation
				animation.translateY(300).step()
				this.animationData = animation.export();
				setTimeout(function() {
					animation.translateY(0).step()
					this.animationData = animation.export(),
						this.showModalStatus = false;
				}.bind(this), 200)
			},

			getList: function(mobile = '', name = '', startDate = '', endDate = '', page = 1, callback) {
				var id = this.id;
				var data = {
					customerMobile: mobile,
					customerName: name,
					startDate: startDate,
					endDate: endDate,
					current: page
				};
				var url = '/shop/store-api/' + uni.getStorageSync('shop_id') + '/shopinfo/getShopOrderforms/' + id;
				request.http(url, 'POST', data, '数据加载中...').then(res => {
					var data = res.data;
					if (data.code == 0) {
						var list = data.data.records;
						callback(list);
					}
				})
			},

			getPrice: function(callback) {
				var id = this.id;

				var url = '/shop/store-api/' + uni.getStorageSync('shop_id') + '/frontUserinfo/' + id + '/getTurnover';
				request.http(url, 'GET').then(function(info) {
					if (info.data.code == 0) {
						callback(info.data.data.amount)
					}
				})
			},

			changeStartDate: function(e) {
				var startDate = e.detail.value;
				this.startDate = startDate;
			},

			changeEndDate: function(e) {
				var endDate = e.detail.value;
				this.endDate = endDate;
			},

			changeMobile: function(e) {
				var mobile = e.detail.value;
				this.mobile = mobile;
			},

			screen: function() {
				var startDate = this.startDate;
				var endDate = this.endDate;
				var mobile = this.mobile;
				var page = 1;

				this.page = 1;

				this.getList(mobile, mobile, startDate, endDate, page, list => {
					this.list = list;
					this.hideModel();
				})
			},
		}
	}
</script>

<style src="../../static/css/app.css"></style>
<style>
	.title_box2 .title .icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.title_box2 .amount {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FF1313;
		line-height: 28rpx;
	}

	.dataChart {
		width: 100%;
		height: 417rpx;
	}

	.filter {
		color: #666;
		font-weight: normal;
		font-size: 24rpx;
	}

	.filter .icon {
		width: 28rpx;
		height: 28rpx;
		margin-left: 10rpx;
	}

	/* <!-- 2.table --> */
	.table {

		width: 100%;
	}

	.table .tTitle {
		width: 100%;
		height: 60rpx;
		background: #F5F5F5;
		font-size: 20rpx;
		font-weight: 500;
		color: #999;
		line-height: 60rpx;
	}

	.table .tContent {
		border-bottom: 1rpx #eee solid;
		font-size: 20rpx;
		line-height: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: #fff;
	}

	.table .tContent .content,
	.table .tTitle .header {
		text-align: center;
		width: 25%;
		box-sizing: border-box
	}

	.table .tContent .content:first-of-type {
		color: #FF1313;
	}

	.table .tContent .content.dpflxc {
		color: #333;
	}

	.content .mImg {
		width: 120rpx;
		height: 80rpx;
		border-radius: 6rpx;
		margin-bottom: 5rpx;
	}

	.popupWindow {
		height: 575rpx;
		width: 100%;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;

		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: border-box;
	}

	.popupWindow .title_box {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx #eee solid;
	}

	.popupWindow .title_box .close {
		width: 58rpx;
		height: 24rpx;
		color: #999999;
		line-height: 24rpx;
		border-radius: 0rpx;
	}

	.popupWindow .title_box2 {
		font-size: 28rpx;
		line-height: 28rpx;
		padding-bottom: 20rpx;
	}

	.picker {
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 12rpx;
		color: #999;
		box-sizing: border-box;
		padding: 0 60rpx 0 20rpx;
		line-height: 60rpx;
	}

	.picker.short {
		width: calc((100% - 30rpx) / 2);

	}

	.picker .downArrow {
		right: 20rpx;
		margin-top: 0rpx;
		top: 20rpx;
	}

	.inputBox1 {
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		line-height: 60rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
</style>
